import {Button, Card, Text, View} from "react-native-ui-lib";
import {Dimensions, ImageBackground, StyleSheet} from "react-native";
interface Props {
    content?: string;
}
export function LiveYuGaoView({ content }: Props) {
    const screenWidth = Dimensions.get('window').width;
    return <View style={[styles.allContainer]} width={screenWidth*0.90}>
        <ImageBackground
            source={require('../../assets/images/livebg.png')}
            style={styles.backgroundImage}
            imageStyle={styles.imageStyle}
        >
            <View style={styles.viewBg}>
                <Text style={styles.textbg}>预告</Text>
            </View>
            <View style={styles.contentContainer}>
                <Text style={styles.text}>直播预告</Text>
            </View>
            <View style={styles.footerContainer}>
                <Text style={styles.text}>更多  {content}</Text>
            </View>
        </ImageBackground>
    </View>;
}
const styles = StyleSheet.create({
    allContainer: {
        margin: 10,
        flex: 1,
    },
    backgroundImage: {
        height: 130,
        padding: 10,
    },
    imageStyle: {
        borderRadius: 8,
    },
    contentContainer: {
        paddingVertical: 10,
    },
    viewBg: {
        width: 30,
        height: 18,
        marginTop: 12,
        borderRadius: 2,
        alignItems: 'center',
        backgroundColor: '#308fff',
    },
    footerContainer: {
        flexDirection: 'row',
        marginTop: 20, // 底部间距
    },
    footer: {
        alignItems: 'flex-start', // 左对齐
        justifyContent: 'flex-end', // 底部对齐
        marginBottom: 5, // 底部间距
    },
    text: {
        color: '#333', // 文字颜色可以根据背景图调整
        fontSize: 16,
    },

    textbg: {
        color: '#ffffff', // 文字颜色可以根据背景图调整
        fontSize: 12,
    },
});